<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>插槽的使用</title>
  <script src="../js/vue.js"></script>
</head>

<body>
  <div id="root">
    <text-component title="props传参">哈哈哈哈哈</text-component>
  </div>

</body>

<!--  
  插槽用来接收父组件传递过来的数据
-->


<script type="text/javascript">
  Vue.config.productionTip = false;

  Vue.component("text-component", {
    props: ['title'],
    template: '<div><h1>{{title}}</h1> <slot></slot></div>',
  })


  new Vue({
    el: '#root',
    data: {
     
    },
    methods: {}
  })
</script>

</html>